<template>
	<div class="subpage homedetail">
		<div class="home-wrap">
			<div class="img-box">
				<img :src="detailData.largePic" alt="">
				<div class="flex-top">
					产业升级项目
				</div>
			</div>
			<div class="main-wrap">
				<div class="main">
					<h3>{{detailData.productName}}({{detailData.farmName}})</h3>
					<p class="price">{{detailData.totalPrice}}<i>{{detailData.productPriceUnit}}</i></p>
					<p class="count">存货数量：{{detailData.numSaves}}头</p>
					<p class="mock"><span>重量：{{detailData.productWeight}}{{detailData.productWeightUnit}}</span><span class="right">单价：{{detailData.salesPrice}}元/kg</span></p>
					<p class="mock"><span>养殖期：{{detailData.timeLimit}}个月</span><span class="right">剩余交货期：{{detailData.deliveryMonth}}个月</span></p>
					<p class="mock"><span>养殖地：{{detailData.originProvince}}</span><span class="right">牧场：{{detailData.farmName}}</span></p>
					<p class="mock meat-info">
						<span>交货标准: {{detailData.productDescription}}<img src="../../assets/img/home_img12.png" alt="" class="meat-tips" @click="meatTips"></span>
						
					</p>
				</div>
			</div>
			<div class="erbiao" @click="jumpItem()" v-if="detailData.numSaves > 0">
				<span class="biaoId">耳标ID</span>
				<span class="detail-more">详情 <van-icon name="arrow" size="14px" color="#CDCDCD" style="vertical-align: middle;margin-left: 4px;" /></span>
			</div>
			<div class="bg"></div>
			<div class="type-wrap">
				<div class="radio-box">
					<div class="type">
						 <div class="type-title">配送方式</div>
					</div>
					<div class="delivery-text">
						<div class="delivery-text-left">
							<van-icon name="checked" class="color-primary" />
							<span>{{detailData.shipmentCategory}}</span>
							<span>{{detailData.postage}}</span>
						</div>
						<div class="delivery-text-right">
							<span>{{detailData.shipmentDetail}}</span>
						</div>
					</div>
				</div>
				<div class="radio-box">
					<div class="type">
						 <div class="type-title">交易方式</div>
					</div>
					<div class="delivery-text">
						<div class="delivery-text-left">
							<van-icon name="checked" class="color-primary" />
							<span>{{detailData.payCategory}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="tab">
				<van-tabs 
					v-model="active" 
					sticky 
					line-width="16%" 
					title-active-color="#31BC8D" 
					color="#31BC8D" 
					title-inactive-color="#344047"
					@click="chooseTab"
				>
					<van-tab title='牧场介绍'>
						<div class="ranch-intro">
							<img :src="detailData.farmDetail" alt="">
						</div>
					</van-tab>
					<!-- <van-tab title='三方公证'>
						2
					</van-tab> -->
					<van-tab title='牧场直播'>
						<FarmLiveComponent :liveType="liveType"></FarmLiveComponent>
						
					</van-tab>
					<!-- <van-tab title='牛只保险'>
						
					</van-tab> -->
				</van-tabs>
			</div>
		</div>
		<div class="footer-wrap">
			<div class="footer">
				<a :href="'tel:' + cusumerTel" class="phone">
					<img src="@/assets/img/home_img11.png" alt="">
					<span>咨询电话</span>
				</a>
				<van-button round class="u-btn-default bind-btn" @click="toPaydetail" :disabled="isDisabled" :class="isDisabled == true ? 'active': ''">
					{{btnTitle}}
				</van-button>
			</div>
		</div>
		
		
		
		<div class="modal" v-show="isOverlay">
			<div class="modal-head">牛身份ID <van-icon name="cross" color="#31BC8D" class="closeOverlay" @click="hideOverlay" /></div>
			<div class="modal-content">
				<h3>安格斯牛耳标ID: </h3>
				<div class="modalId clearfix" v-for="item in cattleList" :key="item.cattleIdCard">
					<span class="modal-left">ID：{{item.cattleIdCard}}</span>
					<span class="modal-right">体温：{{item.temperature}}℃</span>
				</div>
			</div>
			<div class="bg"></div>
			<div class="zs">
				<h3>转售记录</h3>
			</div>
		</div>

		<div class="meat-alert-container" v-if="meatTipsFlag">
			<div class="meat-alert-box">
				<div class="meat-alert-box-top">牛胴体</div>
				<div class="meat-alert-box-center">
					<p>{{detailData.productDescriptionIntro}}</p>
					<p>{{detailData.productDescriptionDetail}}</p>
				</div>
				<div class="color-primary meat-alert-box-bottom" @click="meatTipsFlag = false">知道啦</div>
			</div>
		</div>
		<!-- <van-overlay :show="isOverlay" @click="isOverlay = false"/> -->
	</div>
</template>
<script>
	import Vue from 'vue';
	import { RadioGroup, Radio, Tab, Tabs, overlay } from 'vant';
	Vue.use(RadioGroup).use(Radio).use(Tab).use(Tabs).use(overlay)
	import FarmLiveComponent from '@/components/homeCom/FarmLiveComponent'
	
	export default {
		components: {
			FarmLiveComponent
		},
		data(){
			return {
				cusumerTel: '',
				isOverlay: false,
				id: '',
				btnTitle: '立即采购',
				isDisabled: false,
				radio: '1',
				radio2: '1',
				active: 0,
				detailData: {},
				cattleData: {},
				cattleList: [],
				meatTipsFlag: false,
				liveType: 2, //牧场直播类型 1直播 2视频
			}
		},
		created(){
			// 获取推荐资源详情数据
			this.id = this.$route.params.id;
			this.getDetailData();
			this.getCattleData();    //  获取商品对应的牛信息
			
			this.getTelData() // 客服电话接口
		},
		mounted(){
			//  上下个页面存储数据在浏览器，返回全部清除
			localStorage.removeItem('count');
			localStorage.removeItem('checkedXY');
			localStorage.removeItem('checkedZF');
			localStorage.removeItem('checkedYE')
		},
		methods: {
			showToast(){
				this.$tool.toast('页面正在开发中，敬请期待！')
			},
			onClick(name,title){
				console.log(name,title)
				if(title == '牧场直播'){
					this.showToast()
					this.active = 0;
				} else if(title == '牛只保险'){
					this.active = 0;
					this.showToast()
				}
			},
			// 去到支付页面
			toPaydetail(){
				//  检验是否是自己挂的单  GET /api/resale/check/{product_id}
				console.log(this.$route.params.id)
				this.$api.get('/api/resale/check/' + this.$route.params.id)
				.then((res)=>{
					console.log(res)
					if(res.code == 0){ // 60005 表示是自己的转售单，因为不能跳进里面页面
						// 是自己挂的单
						// 初始化 vuex  便于操作
						// 先在这个页面把 数据存到 vuex， 如果在里面页面存的话跳到地址页面再返回 数据 会重复初始化
						localStorage.setItem('checkedYE', true) // 默认选择 余额支付
						this.$store.commit('totalWeight', this.detailData.productWeight)
						this.$store.commit('totalPrice', this.detailData.totalPrice)
						this.$store.commit('expressFee', this.detailData.expressFee)
						this.$router.push({
							path: '/home/paydetail/' + this.id
						})
					} else if(res.data.code == 60005){
						this.$tool.toast('您不能购买自己的转售标')
						return
					}
					
				})
				
			},
			// 获取推荐资源详情数据 
			getDetailData(){
				this.$api.get('/api/product/detail/' + this.id)
				.then((data)=>{
					console.log(data)
					this.detailData = data.data;
					this.liveType = data.data.liveType;
					
					// 判断按钮状态
					if(this.detailData.numSaves == 0){
						this.btnTitle = '已售罄';
						this.isDisabled = true;
					}
					// 判断这是从已成交资源列表跳进来得页面
					if(this.$route.query.compelelist == undefined) {
						return 
					} else {
						this.isDisabled = true;
						this.btnTitle = '已成交';
					}
				})
			},
			//  获取商品对应的牛信息
			getCattleData(){
				this.$api.get('/api/product/cattle_list/'+ this.id)
				.then(({data})=>{
					if(data.length > 0){
						this.cattleData = data[0];
						this.cattleList = data;
					}
					
				})
			},
			// 客服电话
			getTelData(){
				this.$api.get('/api/index/consumer_tel?noLoading')
				.then(({data})=>{
					this.cusumerTel = data.cusumerTel;
				})
			},
			// 显示遮罩层
			showOverlay(){
				this.isOverlay = true;
			},
			// 隐藏遮罩层
			hideOverlay(){
				this.isOverlay = false;
			},
			// 跳转到耳标详情
			jumpItem() { //耳标ID
				this.$router.push({
					path: `/home/earid/${this.id}/1` 
				})
			},

			meatTips() { //出肉率提示
				this.meatTipsFlag = true;
			},

			chooseTab(name, title) {
				if(name == 2){
					this.$tool.toast('正在开发中，敬请期待！')
				}
			},

			goFarmLive() { //去牧场直播页
				this.$router.push({
					name: 'farmLiveDetail',
					query: {
						farmLive: this.detailData.farmLive2
					}
				})
			}
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.homedetail {
		.van-checkbox__icon .van-icon {
			width: 21px;
		}
		.van-tabs__content{
			margin-top: 2px;
		}
	}
</style>

<style lang="scss" scoped>
	.erbiao{
		width: 100%;
		height: 48px;
		line-height: 48px;
		padding: 0 16px;
		border-top: 1px solid #F2F2F2;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		.biaoId{
			color: #344047;
			font-size: 16px;
		}
		.detail-more{
			color: #969C9E;
			font-size: 12px;
		}
		
	}
	.home-wrap {
		width: 100%;
		height: calc(100% - 63px);
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.bg{
		width: 100%;
		height: 10px;
		background-color: #f2f2f2;
	}
	.van-overlay{
		z-index: 99 !important;
	}
	.modal {
		width:344px;
		height:438px;
		background:rgba(255,255,255,1);
		border-radius:8px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -172px;
		margin-top: -219px;
		z-index: 9999;
		.modal-head{
			width: 100%;
			height: 62px;
			line-height: 62px;
			text-align: center;
			color: #5D6164;
			font-size: 16px;
			border-bottom: 1px solid #F2F2F2;
			position: relative;
			.closeOverlay{
				display: block;
				font-size: 20px;
				position: absolute;
				right: 23px;
				top: 20px;
				font-weight: 600;
			}
		}
		.modal-content{
			padding: 24px 16px 16px 16px;
			h3{
				color: #5D6164;
				font-size: 16px;
				margin-bottom: 16px;
			}
			.modalId{
				width: 100%;
				margin-bottom: 16px;
				.modal-left{
					float: left;
				}
				.modal-right {
					margin-left: 85px;
				}
				span{
					color: #969C9E;
				}
			}
		}
		.zs{
			padding: 24px 16px 16px 16px;
			h3{
				color: #5D6164;
				font-size: 16px;
				margin-bottom: 16px;
			}
		}
		
	}
	
	.active{
		background: #D0CFCF !important;
	}
	.img-icon img{
		width: 11px;
		margin-left: 32px;
		margin-right: 4px;
	}
	.img-icon .bz{
		color: #F58523;
	}
	.tab{
		width: 100%;
		
	}

	.img-box{
		width: 100%;
		height: 174px;
		position: relative;
		.flex-top{
			line-height: 34px;
			text-align: center;
			background-color: #31BC8D;
			color: #fff;
			width:115px;
			height:34px;
			border-radius:0px 100px 100px 0px;
			position: absolute;
			bottom: 10px;
			left: 0;
		}
		img{
			width: 100%;
			height: 174px;
		}
	}
	.main-wrap{
		background-color: #fff;
		padding: 16px;
		.main{
			
			h3{
				font-size: 16px;
				color: #344047;
				margin-bottom: 16px;
			}
			.price{
				font-size: 18px;
				color: #F58523;
				margin-bottom: 16px;
				font-weight: 500;
				i{
					color: #969C9E;
					font-size: 12px;
					margin-left: 6px;
					font-weight: 400;
				}
			}
			.count {
				color: #5D6164;
				margin-bottom: 16px;
			}
			.mock{
				color: #969C9E;
				margin-bottom: 12px;
				position:relative;
				.right{
					position: absolute;
					left: 180px;
					top: 0;
				}
				.meat-tips {
					width: 16px;
					height: 16px;
					vertical-align: middle;
				}
				&.meat-info {
					display: flex;
					align-items: center;
				}
			}
			.mock:last-child{
				margin-bottom: 0;
			}
		}
	}

	.type-wrap{
		background-color: #fff;
		padding: 0 16px 16px 16px;
		margin-bottom: 10px;
		.radio-box{
			.type {
				.type-title{
					width: 100%;
					height: 48px;
					line-height: 48px;
					color: #344047;
					font-size: 16px;
					font-weight: 500;
				}
			}
		}
		.radio-box:last-child{
			margin-bottom: 0;
		}
	}
	.footer-wrap{
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow:2px 2px 5px #c2c2c2;
		-webkit-box-shadow:2px 2px 5px #c2c2c2;
		z-index: 2;
		.footer {
			width: 100%;
			height: 63px;
			background-color: #fff;
			padding: 6px 16px 6px 34px;
			.phone{
				height: 100%;
				flex: 1;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;
				float: left;
				img{
					width: 20px;
				}
				span{
					font-size: 12px;
					color: #969C9E;
				}
			}
			.bind-btn {
				width: 230px;
				background:linear-gradient(94deg,rgba(49,188,141,1) 0%,rgba(166,226,155,1) 100%);
				box-shadow: none;
				float: right;
			}
		}
	}
	
	.meat-alert-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .4);
		.meat-alert-box {
			width: 310px;
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;
			.meat-alert-box-top {
				width: 100%;
				height: 52px;
				line-height: 52px;
				font-size: 16px;
				color: #5D6164;
				text-align: center;
				background-color: #F8F8F8;
			}
			.meat-alert-box-center {
				padding: 16px 22px;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				p{
					&:first-child{
						color: #344047;
						font-size: 16px;
						margin-bottom: 10px;
						font-weight: 500;
					}
				}
			}
			.meat-alert-box-bottom {
				width: 100%;
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 16px;
			}
		}
	}
	
	.ranch-intro {
		width: 100%;
		padding-bottom: 10px;
		margin-top: 2px;
		img {
			width: 100%;
		}
	}

	.ranch-live-box {
		width: 100%;
		padding: 24px 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.live-ranch-name {
			width: 278px;
			height: 42px;
			margin: 0 auto 16px;
			line-height: 42px;
			text-align: center;
			background: url('../../assets/img/ranch_live_bg.png') center no-repeat;
			background-size: cover;
			font-size: 16px;
			color: #fff;
		}
		.live-ranch-bg {
			width: 100%;
			height: 183px;
			margin-bottom: 24px;
			background-repeat: no-repeat;
            background-position: center;
			background-size: cover;
			.live-ranch-mask {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, .5);
				img {
					width: 66px;
					height: 66px;
					object-fit: cover;
				}
			}
		}
		.live-ranch-intro {
			p {
				font-size: 12px;
				color: #969C9E;
				text-indent: 2em;
				&:nth-child(1) {
					margin-bottom: 10px;
					font-size: 14px;
					color: #5D6164;
					text-indent: 0;
				}
			}
		}
	}

	.delivery-text {
		width: 100%;
		.delivery-text-left {
			display: flex;
			align-items: center;
			margin-right: 32px;
			.color-primary {
				position: relative;
				top: -1px;
				font-size: 20px;
			}
			span {
				margin-left: 8px;
				color: #969C9E;
			}
		}
		.delivery-text-right {
			margin-left: 28px;
			margin-top: 4px;
			img {
				width: 11px;
				height: 11px;
				object-fit: cover;
				margin-right: 8px;
			}
			span {
				color: #969C9E;
			}
		}
	}
</style>